<template>
    <div ref="vantaRef" class="vanta"></div>
    <div class="login-box">
        <div class="flex-middle" style="width: 100%; padding-top: 50px; padding-bottom: 20px;">
            <img style="height: 120px;" src="https://varitall.oss-cn-beijing.aliyuncs.com/icon/hello-yt.png" />
        </div>

        <el-form v-if="isLogin" :model="form" label-width="0" style="padding: 10px 30px 10px 30px;">
            <el-form-item>
                <!-- <template #label></template> -->
                <el-input v-model="form.username" class="font-size-16" style="height: 50px;" placeholder="请输入用户名" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <!-- <template #label></template> -->
                <el-input 
                    v-model="form.password" 
                    class="font-size-16"
                    style="height: 50px;" 
                    type="password" 
                    @keyup.enter="handleLoginEnter()" 
                    placeholder="请输入密码"
                    autocomplete="off" 
                />
            </el-form-item>
        </el-form>

        <el-form v-else :model="registerForm" :rules="rules" label-width="0" style="padding: 10px 30px 10px 30px;">
            <el-form-item prop="username">
                <!-- <template #label></template> -->
                <el-input v-model="registerForm.username" class="font-size-16" style="height: 50px;"
                    placeholder="请输入用户名" autocomplete="off" /></el-form-item>
            <el-form-item prop="password">
                <!-- <template #label></template> -->
                <el-input 
                    v-model="registerForm.password" 
                    class="font-size-16"
                    style="height: 50px;" 
                    type="password" 
                    placeholder="请输入密码"
                    autocomplete="off" 
                />
            </el-form-item>
            <el-form-item prop="confirmPassword">
                <el-input 
                    v-model="registerForm.confirmPassword" 
                    class="font-size-16"
                    style="height: 50px;" 
                    type="password" 
                    @keyup.enter="handleLoginEnter()" 
                    placeholder="确认密码"
                    autocomplete="off" 
                />
            </el-form-item>
        </el-form>

        <div class="flex-middle" style="flex-direction: column;" v-loading.fullscreen.lock="isLoading">
            <el-button v-if="isLogin" type="primary" style="font-size: 16px; width: 300px; height:40px;" 
                @click="login">登录</el-button>
            <el-button v-else type="success" style="font-size: 16px; width: 300px; height:40px;" 
                @click="register">注册</el-button>
        </div>

        <div class="flex-middle p-click">
            <p v-if="isLogin" style="margin-top: 40px;" @click="toggle">没有账号？去注册</p>
            <p v-else style="margin-top: 40px;" @click="toggle">已有账号？去登录</p>
        </div>
        
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
import * as THREE from 'three';
import WAVES from 'vanta/src/vanta.waves'
import { navigateTo } from 'nuxt/app';

const vantaRef = ref()
const isLogin = ref(true);
const isLoading = ref(false)
const form = reactive({
    username: null,
    password: null
})
const registerForm = reactive({
    username: null,
    password: null,
    confirmPassword: null
})

/**
 * 登录
 */
const login = async () => {
    isLoading.value = true;
    const res = await UserLogin(form);
    if (res.code == '0') {
        ElMessage.success('登录成功')
        if (import.meta.client) {
            localStorage.setItem('token', res.data.token);
        }
        await navigateTo({
            path: '/',
            query: {}
        });
    } else {
        ElMessage.error('登陆失败')
    }
    isLoading.value = false;
}

/**
 * 注册
 */
const register = async() => {
    if (isBlank(registerForm.password) || 
        isBlank(registerForm.confirmPassword) || 
        !equals(registerForm.password, registerForm.confirmPassword)) {
        return;
    }
    isLoading.value = true;
    const res = await UserRegister(registerForm);
    if (res.code == '0') {
        ElMessage.success('注册成功')
        toggle();
    } else {
        ElMessage.error('注册失败: ' + res.message)
    }
    isLoading.value = false;
}

/**
 * 是否存在某个用户名
 * @param rule 
 * @param value 
 * @param callback 
 */
const hasUsername = async(rule, value, callback) => {
    const res = await HasUsername(registerForm.username);
    if (res.code == '0') {
        if (res.data) {
            callback(new Error(`用户名${registerForm.username}已存在`))
        } else {
            callback()
        }
    } else {
        callback(new Error(res.message))
    }
}

/**
 * 检查密码相同
 * @param rule 
 * @param value 
 * @param callback 
 */
const checkPassword = async(rule, value, callback) => {
    if (registerForm.confirmPassword == registerForm.password) {
        callback();
    } else {
        callback(new Error('密码和确认密码不相等'))
    }
}


const rules = reactive({
    username: [
        { required: true, validator: hasUsername, trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
    ],
    confirmPassword: [
        { required: true, validator: checkPassword, trigger: 'blur' },
    ],
})

/**
 * 处理回车登录
 */
const handleLoginEnter = async () => {
    login();
}

/**
 * 切换登录和注册
 */
const toggle = async() => {
    if (isLogin.value) {
        isLogin.value = false;
    } else {
        isLogin.value = true;
    }
}

// 动态背景
let vantaEffect = null
onMounted(() => {
    vantaEffect = WAVES({
        el: vantaRef.value,
        THREE: THREE,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        scale: 1.0,
        scaleMobile: 1.0,
        color: 0x294f58
    })
})
onBeforeUnmount(() => {
    if (vantaEffect) {
        vantaEffect.destroy()
    }
})
</script>

<style scoped>
.vanta {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
}


.login-box {
    /* border: 2px solid #0984e3; */
    overflow: hidden;
    justify-content: space-between;
    border-radius: 20px;
    padding: 0 40px 0 40px;
    height: 700px;
    width: 500px;
    /* background-color: #eee; */
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    /* border: 1px solid #eee; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
</style>
